<script setup>
import useTable from "@/utils/useTable";
import {http} from "@/api";
import { useRouter } from 'vue-router'
/**
 * 表格
 * @type {Ref<UnwrapRef<*[]>>}
 */
const {
  searchParams,
  pageNo,
  pageSize,
  total,
  changePage,
  changeSize,
  dataSource,
  search,
  reset,
  openAdd,
  openEdit,
  openDelete
} = useTable({
  requestFn: http.ProductList,
  routerPre: 'ProductList',
  params: {
    name: '',
  }
})
const router = useRouter()
const openDetail = (item) => {
  router.push({
    path: '/Product/Detail/' + item.id,
  })
}
</script>

<template>
  <PageMain title="婚庆套餐列表">
    <el-row :gutter="20">
      <el-col :span="4" v-for="item in dataSource">
        <div class="goods-box" style="cursor:pointer;" @click="openDetail(item)">
          <el-image :src="item.image" style="width: 100%"></el-image>
          <div class="p-detail">
            <div class="p-name">{{ item.name }}</div>
            <div class="p-desc">{{ item.category.name }}</div>
            <div class="f-r j-b a-c">
              <div class="p-price">
                <span style="font-size:12px">¥</span>
                {{ item.price }}
              </div>
              <div class="p-sale">
                销量：{{ item.sale_count }}
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-pagination
        v-model:current-page="pageNo"
        v-model:page-size="pageSize"
        :page-sizes="[10, 50, 100, 200]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="changeSize"
        @current-change="changePage"
    />
  </PageMain>
</template>

<style lang="scss">
.goods-box{
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
}
.p-detail {
  padding: 18px;
  cursor: pointer;
  .p-name {
    width: 100%;
    height: 22px;
    color: #333333ff;
    font-size: 16px;
    font-weight: 500;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 25.6px;
  }
  .p-desc {
    height: 17px;
    color: #666666ff;
    font-size: 12px;
    font-weight: 400;
    font-family: "PingFang SC";
    width: 100%;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-top: 8px;
  }
  .p-price {
    color: #ff264aff;
    font-size: 16px;
    font-weight: 600;
  }
  .p-sale{
    color: #666666ff;
    font-size: 12px;
    font-weight: 400;
    font-family: "PingFang SC";
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
</style>